<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="职位编号">
              <a-input v-model="queryParam.recruitNo" placeholder="请输入职位编号"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="职位名称">
              <a-input v-model="queryParam.postTitle" placeholder="请输入职位名称"/>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
          <a-col :md="8" :sm="24">
            <a-form-item label="招聘企业">
              <a-input v-model="queryParam.company" placeholder="请输入招聘企业"/>
            </a-form-item>
          </a-col>
           <a-col :md="24" :sm="24" style="">
              <standard-form-row title="职位状态"  style="border-bottom:none" >
              <a-form-item>       
                  <tag-select  @change="selectChange" :hideCheckAll='true' ref="postStatus">
                   <!-- status 1.已推2.已面试3.已录用4.已入职5.已过保6.淘汰7报名    其他代表淘汰-->
                  <tag-select-option value="0">全部</tag-select-option>
                  <tag-select-option value="7" :checked="hasReport">已报名</tag-select-option>
                  <tag-select-option value="1" :checked="hasPush">已推</tag-select-option>
                  <tag-select-option value="2" :checked="hasInterview">已面试</tag-select-option>
                  <tag-select-option value="3" :checked="hasAdmission">已录用</tag-select-option>
                  <tag-select-option value="4" :checked="hasInduction">已入职</tag-select-option>
                  <tag-select-option value="5" :checked="hasBartender">已过保</tag-select-option>
                  <tag-select-option value="6" :checked="hasEliminated">已淘汰</tag-select-option>
                  </tag-select>
              </a-form-item>
            </standard-form-row>
          </a-col>
          <a-col :md="16" :sm="24">
              <standard-form-row title="是否悬赏" block style="border-bottom:0">
            <a-form-item>
                <tag-select  @change="bountyChange" :hideCheckAll='true' ref="bodunty">
                   <tag-select-option value="1" :checked="hasBounty" >有悬赏</tag-select-option>
                   <tag-select-option value="0" :checked="noBounty" >无悬赏</tag-select-option>
                </tag-select>
            </a-form-item>
            </standard-form-row>
          </a-col>
          </template>

          <a-col :md="!advanced && 8 || 8" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="$refs.table.refresh(true)">提交</a-button>
              <a-button style="margin-left: 8px" @click="clearValue">清空</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>



    <s-table
      ref="table"
      size="default"
      rowKey="record => record.id"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
     <span slot="serNmber" slot-scope="text, record, index">
        <template>
           {{index+1}}
        </template>
     </span>
     <span slot="cerInfo" slot-scope="text,record">
         <template>
              <div>{{record.nowCompany}}</div>
              <div>{{record.nowPost}}</div>
         </template>
     </span>
      <span slot="reportPostTitle" slot-scope="text,record">
         <template>
             <div>{{record.postTitle}}</div>
             <div v-if="record.recruitNo">({{record.recruitNo}})</div>
         </template>
      </span>
     <span slot="status" slot-scope="text,record">
         <template>
          <a-button   disabled v-if='record.status==1' class="disable_status">推</a-button>
          <a @click="changeStatus(record,1)" v-else>推</a>
          <a-divider type="vertical" />
          <a-button   disabled v-if='record.status==2' class="disable_status">面</a-button>
          <a @click="changeStatus(record,2)" v-else>面</a>
          <a-divider type="vertical" />
          <a-button   disabled v-if='record.status==3' class="disable_status">录</a-button>
          <a @click="changeStatus(record,3)" v-else>录</a>
          <a-divider type="vertical" />
          <a-button   disabled v-if='record.status==4' class="disable_status">岗</a-button>
          <a @click="changeStatus(record,4)" v-else>岗</a>
          <a-divider type="vertical" />
          <a-button   disabled v-if='record.status==5' class="disable_status">保</a-button>
          <a @click="changeStatus(record,5)" v-else>保</a>
        </template>
      </span>
      <!-- <span slot="qrCode" slot-scope="text,record">
          <a @click="lookCode(record)" class="lookCode">查看</a>         
      </span> -->

      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="goDestail(record)">详情</a>
        </template>
      </span>
    </s-table>
  
    
  </a-card>
</template>

<script>
import moment from 'moment'
import { getRoleList } from '@/api/manage'
import { getReportList,changeStatus } from '@/api/job'
import { datetimes6 } from '@/utils/util';
import { Modal } from 'ant-design-vue'


import {STable, TagSelect, StandardFormRow, Ellipsis, AvatarList } from '@/components'
const TagSelectOption = TagSelect.Option
const AvatarListItem = AvatarList.AvatarItem



export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    StandardFormRow,
    TagSelect,
    TagSelectOption
  },
  data () {
    return {
      form: this.$form.createForm(this),
      hasBounty:false,
      noBounty:false,
      hasReport:false,
      hasPush:false,
      hasInterview:false,
      hasAdmission:false,
      hasInduction:false,
      hasBartender:false,
      hasEliminated:false,
   
      // qrcodeUrl,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        device:5,
        version:3900,
        userId:localStorage.getItem('userId'),
        postTitle:'',
        status:'',
        bounty:'',
        recruitNo:'',
        company:''
      },
      // 表头
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serNmber' },
        },
        {
          title: '报名人',
          scopedSlots: { customRender: 'wxAccountName' },
          dataIndex: 'wxAccountName'
        },
        {
          title: '认证信息',
          scopedSlots: { customRender: 'cerInfo' }
        },
        {
          title: '报名职位',
          scopedSlots: { customRender: 'reportPostTitle' }
        },
        {
          title: '招聘企业',
          dataIndex: 'company',
        },
 
        {
          title: '报名时间',
          dataIndex: 'createTime',
        },
        {
          title: '状态',
          width: '180px',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          width: '80px',
          scopedSlots: { customRender: 'action' }
        }
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return getReportList(Object.assign(parameter, this.queryParam))
          .then(res => {
            console.info('表格请求回来的数据',res.result);
            let result=res.result;
            result.data.forEach((v,i) => {
               result.data[i].createTime=datetimes6(v.createTime)
            
            });
            return result
          })
      },
      selectedRowKeys: [],
      selectedRows: [],

      // custom table alert & rowSelection
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: false
    }
  },

  created () {
    this.tableOption()
    getRoleList({ t: new Date() })
    const cdId = this.$route.params.cdId;
    if(cdId){
      this.queryParam.cdId=cdId;
    }
  
  },
  methods: {
    tableOption () {
      if (!this.optionAlertShow) {
        this.options = {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: record => ({
              props: {
                disabled: record.no === 'No 2', // Column configuration not to be checked
                name: record.no
              }
            })
          }
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null
        }
        this.optionAlertShow = false
      }
    },
    //查看二维码
    lookCode(record){
      const that=this;
      const h = this.$createElement
      let id=record.cdId;
      let imgUrl='https://xsxz-dev.shouhuobao.com/rank/codeLimit?device=5&version=3900&dynamicId='+id+'&page=pages/login/login&qrCodeType=shareDetail&topicId=2'
      this.$info({
        title: '使用微信扫描二维码浏览',
    content: h('div',{}, [
          h('img', {attrs:{
            class:'imgQRcode',
            src: imgUrl
          }}),
        ]),
        onOk() {},
      });
    },



// 跳转详情
    goDestail(record) {
      this.$router.push({path:'/report/Details/' + record.id});
    },
    //清楚表单数据
    clearValue(){
       this.hasBounty=false
       this.noBounty=false

       this.hasReport=false
       this.hasPush=false
       this.hasInterview=false
       this.hasAdmission=false
       this.hasInduction=false
       this.hasBartender=false
       this.hasEliminated=false

       this.$refs.bodunty.onCheckAll({checked:false})
       this.$refs.postStatus.onCheckAll({checked:false})


       this.queryParam.postTitle = '';
       this.queryParam.status = '';
       this.queryParam.bounty = '';
       this.queryParam.recruitNo = '';
       this.queryParam.company = '';

    },
    handleEdit (record) {
      console.log(record)
      this.$refs.modal.edit(record)
    },

    handleOk () {
      this.$refs.table.refresh()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 悬赏金额
    bountyChange(e){
      const that=this;
      if(e.value==1) {
        this.hasBounty = e.checked;
      }
      if(e.value==0) {
        this.noBounty = e.checked;
      }

      if(this.hasBounty && this.noBounty) {
        that.queryParam.bounty="";
      } else {
        that.queryParam.bounty=this.hasBounty ?1: this.noBounty?0:"";
      }
    },
    //报名列表 改变状态
    changeStatus(record,status){
      const that=this;
      changeStatus({device:5, version:3900,id:record.id,status:status,cdId:record.cdId})
      .then(res => {
        if(res.code==1){
          that.$refs.table.refresh()
        }
      })
      .catch((err) => {
        console.info(err)
      })

    },

    // 选择状态查询列表
    selectChange(e){
      const that=this;
      this.$refs.postStatus.onCheckAll({checked:false})
       if(e.value==0) {
          this.$refs.postStatus.onCheckAll({checked:true})
          this.queryParam.status="";
      }
      if(e.value==7) {
        this.hasReport = true;
        this.$refs.postStatus.onChange({value:"7", checked: true});
        this.queryParam.status='7';
      }
      if(e.value==1) {
        this.hasPush = true;
        this.$refs.postStatus.onChange({value:"1", checked: true});
        this.queryParam.status='1';
      }
      if(e.value==2) {
        this.hasInterview = true;
        this.$refs.postStatus.onChange({value:"2", checked: true});
        this.queryParam.status='2';
      }
      if(e.value==3) {
        this.hasAdmission = true;
        this.$refs.postStatus.onChange({value:"3", checked: true});
        this.queryParam.status='3';
      }
      if(e.value==4) {
        this.hasInduction = true;
        this.$refs.postStatus.onChange({value:"4", checked: true});
        this.queryParam.status='4';
      }
      if(e.value==5) {
        this.hasBartender = true;
        this.$refs.postStatus.onChange({value:"5", checked: true});
        this.queryParam.status='5';
      }
      if(e.value==6) {
        this.hasEliminated = true;
        this.$refs.postStatus.onChange({value:"6", checked: true});
        this.queryParam.status='6';
      }
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}
</script>
<style lang="less" scoped>

.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }

}
  .lookCode{
    text-decoration: underline!important;
  }
  .imgQRcode{
     width: 170px;
    height: 170px;
    margin-top: 20px;
  }
  .antd-pro-components-standard-form-row-index-standardFormRow{
      padding-bottom: 0px;
      margin-bottom: 0px;
  }
  .disable_status{
    border:none;
    padding: 0px;
    background:transparent;
  }
    .disable_status:hover{
      color: rgba(0, 0, 0, 0.25)
    }
</style>
